new Vue({
    el: '#app',
    data: function() {
        return {
            name: '', //查询关键字
            pageCurrent: 1, //当前页码
            pageSize: 8, //每页条数
            total: 0, //查询分页系总条数
            list: [], //歌手列表数据
            value: '0', //状态开关歌手
            addFormVisible: false, //添加歌手表单信息开关
            // 添加歌手表单信息
            addFrom: '',
            // 表单验证规则
            rules: {
                singerName: [{
                    required: true,
                    message: '歌手名不能为空',
                    trigger: 'blur',
                }]
            },
            updateFormVisible: false, //修改歌手表单信息开关
            updateFrom: '', // 修改歌手表单信息
            isAllSelect: false, //是否全选
            ids: [], //id 数组
            headers: {
                "token": localStorage.getItem('token')
            },
            singerVisible: false, //分配角色信息弹框按钮
            defaultProps: {
                children: 'children',
                label: 'label',
                // parentId: 'parentId'
            },
            // 上传歌手图片 文件列表
            fileImgList: [{
                name: '',
                url: ''
            }],
            showImgFileList: false,
            allSongVisible: false, //歌手所有歌曲页面开关
            songList: '', // 歌手所有歌曲
            albumList: [{
                name: '',
                children: [{
                    name: ''
                }],
            }], // 歌手所有专辑，既专辑下的所有歌曲
            allAlbumVisible: false, // 打开显示全部歌单以及歌单下的所有歌曲显示页面
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    mounted() { // 生命周期函数
        this.getPageInfo()
    },
    methods: {
        //获取分页列表数据
        getPageInfo() {
            // 清空数据
            this.list = ''
            console.log(this.name)
            if (this.name.trim() != '') { //判断是否添加了搜素关键字
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/singer/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize + '/' + this.name,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let singerPageInfo = res.data.data.singerPage
                        //1、将后端返回的列表数据赋值给 list
                        // 歌手简介不必全部显示
                        for (var i = 0; i < singerPageInfo.records.length; i++) {
                            // 如果歌手简介不为 null
                            if (singerPageInfo.records[i].singerRemarks != null && singerPageInfo
                                .records[i]
                                .singerRemarks != '') {
                                // 对歌手简介截取，歌手简介文字太多了，这显示前50个字符 + ...
                                singerPageInfo.records[i].singerRemarks = singerPageInfo.records[i]
                                    .singerRemarks
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = singerPageInfo.records

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = singerPageInfo.current
                        this.pageSize = singerPageInfo.size
                        this.total = singerPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            } else { //没有带关键字查询列表信息
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/singer/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let singerPageInfo = res.data.data.singerPage
                        //1、将后端返回的列表数据赋值给 list
                        // 歌手简介不必全部显示
                        for (var i = 0; i < singerPageInfo.records.length; i++) {
                            // 如果歌手简介不为 null
                            if (singerPageInfo.records[i].singerRemarks != null && singerPageInfo
                                .records[i]
                                .singerRemarks != '') {
                                // 对歌手简介截取，歌手简介文字太多了，这显示前50个字符 + ...
                                singerPageInfo.records[i].singerRemarks = singerPageInfo.records[i]
                                    .singerRemarks
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = singerPageInfo.records

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = singerPageInfo.current
                        this.pageSize = singerPageInfo.size
                        this.total = singerPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            }
        },
        //更新每页条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getPageInfo()
        },
        //更新当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageCurrent = val
            this.getPageInfo()
        },
        //改变歌曲状态
        changeStatus(id, status) {
            console.log(id)
            console.log(status)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/singer/status' + '/' + id + '/' + status,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                console.log(res)
            })
        },
        // 添加歌曲
        addSubmit() {
            //获取token
            let jwtToken = localStorage.getItem('token')
            let singerImg = localStorage.getItem('singerAddImgUrl') 
            this.fileImgList.length === 0 ? null:singerImg
            axios({
                method: 'post',
                url: 'http://localhost:8080/singer/add',
                headers: {
                    'token': jwtToken
                },
                data: {
                    'singerName': this.addFrom.singerName,
                    'singerRemarks': this.addFrom.singerRemarks,
                    'singerStatus': 0,
                    'singerImg': singerImg
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                    this.$message.success(res.data.message)
                    this.addFormVisible = false
                } else { //失败
                    this.$message.error(res.data.message)
                }
                // 清除本地存储
                localStorage.removeItem('singerAddImgUrl')
            })
        },
        // 打开添加表单
        openAddForm() {
            // 清空数据
            this.addFrom = {}
            this.fileImgList = []
            // 打开表单
            this.addFormVisible = true
        },
        // 添加图片文件 改变时会调用
        handleChangeAddImg(file, fileList) {
            // 显示文件列表
            this.showImgFileList = true
            if (fileList.length > 0) {
                this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
            }
        },
        // 文件上传前调用 判断文件大小、类型
        beforeUploadAddImg(file) {
            // file.type image/jpeg image/png 
            // 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
            const isImage = file.type.slice(0, 5) === 'image';
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isImage) {
                this.$message.error('上传的文件不是图片!');
            }
            if (!isLt30M) {
                this.$message.error('上传图片大小不能超过 30MB!');
            }
            return isImage && isLt30M;
        },
        // 文件上传成功后的回调函数
        uploadAddImgSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let singerAddImgUrl = response.data.singerImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('singerAddImgUrl', singerAddImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // 单个删除，根据歌手id,删除歌曲数据
        deleteById(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/singer/delete/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 根据id，查询歌手并显示到修改表单中
        update(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/singer/selectOne/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.updateFrom = res.data.data.singer
                    console.log(this.updateFrom)
                    // 清空数据
                    this.fileImgList = []
                    // 打开修改表单
                    this.updateFormVisible = true
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 修改歌曲
        updateSubmit(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            let singerImg = localStorage.getItem('singerUpdateImgUrl') 
            this.fileImgList.length === 0 ? null:singerImg
            axios({
                method: 'put',
                url: 'http://localhost:8080/singer/update',
                headers: {
                    'token': jwtToken
                },
                data: {
                    singerId: this.updateFrom.singerId,
                    singerName: this.updateFrom.singerName,
                    singerStatus: this.updateFrom.singerStatus,
                    singerRemarks: this.updateFrom.singerRemarks,
                    singerImg: singerImg
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.$message.success(res.data.message)
                    //关闭修改表单
                    this.updateFormVisible = false
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
                // 清空本地存储的图片地址
                localStorage.removeItem('singerUpdateImgUrl')
            })
            
        },
        // 修改-文件上传成功后的回调函数
        uploadUpdateImgSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let singerUpdateImgUrl = response.data.singerImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('singerUpdateImgUrl', singerUpdateImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        //e事件源，谁发生了这件事
        allSelect(e) {
            this.ids = []
            // 设置全选状态
            this.isAllSelect = e.target.checked
            // 如果是选中状态,将所有的id到ids中
            if (this.isAllSelect) {
                //添加所有的id到ids中
                this.list.forEach(element => {
                    this.ids.push(element.singerId)
                });
            }
            console.log(this.ids)
        },
        ckSelect(e) {
            let id = e.target._value
            if (e.target.checked) { //选中，把对应的id添加到ids数组
                this.ids.push(id)
            } else { // 未选中，查找ids有没有对应的id，如果有删除掉
                let delindex = this.ids.indexOf(id)
                if (delindex > -1) {
                    this.ids.splice(delindex, 1)
                }
            }
            console.log(this.ids)
        },
        //批量删除
        deteleBatch() {
            console.log(this.ids)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/singer/deleteBatch',
                headers: {
                    'token': jwtToken
                },
                data: this.ids
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                    // 清空 ids 数组
                    this.ids = []
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 根据歌手id，查询此歌手所有歌曲
        getSongBySingerId(id) {
            console.log(this.ids)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/singer/getSongBySingerId/' + id,
                headers: {
                    'token': jwtToken
                },
                data: this.ids
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打开全部歌曲显示页面
                    this.allSongVisible = true
                    this.songList = res.data.data.songList
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 根据歌手id，查询歌手的所有专辑以及专辑下的所有歌曲
        getAlbumSongBySingerId(id) {
            console.log(this.ids)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/singer/getAlbumSongBySingerId/' + id,
                headers: {
                    'token': jwtToken
                },
                data: this.ids
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打开显示全部歌单以及歌单下的所有歌曲显示页面
                    this.allAlbumVisible = true
                    this.albumList = res.data.data.albumTrees
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        handleNodeClick(data) {
            console.log(data);
        }
    }
})